<template>
    <div class="container">
        <div class="kptj grid">
            <!--                    基地级-->
            <zlc-box title="监控管理" v-if="grade == 0">
                <template #default>
                    <div class="main">
                        <evaluation-statistics ref="monitorCom" btn-text="定位" field="monitorName" :datas="monitorDatas" @change="addMonitor" @position="mapGoTo"></evaluation-statistics>
                    </div>
                </template>
            </zlc-box>
            <!--                    局级-->
            <zlc-box title="基地使用情况" v-else>
                <template #default>
                    <div class="main">
                        <base-usage :data="baseMsgData"></base-usage>
                    </div>
                </template>
            </zlc-box>
        </div>

        <div class="jdsl grid">
            <!--         所 等级       -->
            <zlc-box title="建筑楼房" v-if="grade == 0">
                <template #default>
                    <div class="chat">
                        <patrol-count ref="patrolCountCom" @addBuildings="addBuildings"></patrol-count>
                    </div>
                </template>
            </zlc-box>
            <!--        局 等级        -->
            <zlc-box title="基地分布情况" v-else>
                <template #default>
                    <base-count :data="baseCount"></base-count>
                </template>
            </zlc-box>
        </div>

        <div class="whtj grid">
            <!--               基地 等级 -->
            <zlc-box title="土地价值" v-if="grade == 0">
                <template #default>
                    <div class="chat">
                        <maintenance-count :data="maintenanceCountData"></maintenance-count>
                    </div>
                </template>
            </zlc-box>
            <!--                局 等级-->
            <zlc-box title="独立房产统计" v-else>
                <template #default>
                    <land-value :data="IndependentProperty"></land-value>
                </template>
            </zlc-box>
        </div>
    </div>
</template>

<script>
import {onMounted, ref, watch} from "vue";
    import BaseUsage from "../../views/home/components/baseUsage.vue";
    import ZlcBox from "../zlcBox/zlcBox.vue";
    import evaluationStatistics from "../../views/home/components/evaluationStatistics.vue";
    import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
    import {queryMonitor, queryBaeDetailsPlus} from "../../api/api.js";
    import baseCount from "../../views/home/components/baseCount.vue";
    import patrolCount from "../../views/home/components/patrolCount.vue";
    import landValue from "../../views/home/components/landValue.vue";
    import maintenanceCount from "../../views/home/components/maintenanceCount.vue";
    export default {
        name: 'container',
        components: {
            maintenanceCount, landValue,
            patrolCount,
            baseCount,
            evaluationStatistics,
            ZlcBox,
            BaseUsage
        },
        props:{
          data:{
              type: Object,
              default(){
                  return {}
              }
          }
        },
        setup(props, ctx){
            //哪个级别：局级 - 院级 - 所级 - 基地级
            let typeStr = window.typeStr

            //所有监控数据
            let monitorDatas = ref([])
            //监控组件
            let monitorCom = ref(null)
            //基本信息 - 数据
            let baseMsgData = ref({})
            //基地的id
            let baseId = window.baseId

            //基地分布情况
            let baseCount = ref({})
            //土地价值
            let maintenanceCountData = ref({})
            //独立房产分布情况
            let IndependentProperty = ref({})


            //添加监控
            let addMonitor = () => {
                let has = window.map.layers.items.find(item => item.id == 'monitor')
                if(has){
                    has.visible = !has.visible
                    setTimeout(() => {
                        monitorCom.value.loading = false
                    }, 1000)
                    return
                }
                let sxtImg = new URL("@assets/sxt.png", import.meta.url).href;
                //查询监控
                const iconSymbol = {
                    type: "point-3d",
                    symbolLayers: [
                        {
                            type: "icon",
                            resource: { href: sxtImg }, //https://www.jxdkchy.com:30340/src/sxt.png
                            size: 40
                        }
                    ],
                    verticalOffset: {
                        screenLength: 20, // 调整垂直偏移量
                    },
                };
                const iconSymbolRenderer = {
                    type: "simple",
                    symbol: iconSymbol
                };
                const labelClass = {
                    symbol: {
                        type: "text",
                        color: "#fff",
                        backgroundColor: [0, 0, 0, 0.5],
                        font: {
                            family: "Playfair Display",
                            size: 10,
                            weight: "bold"
                        }
                    },
                    labelPlacement: "above-center",
                    labelExpressionInfo: {
                        expression: "$feature.name_text"
                    }
                };
                let graphicsLayerArr = new FeatureLayer({
                    id: "monitor",
                    source: monitorDatas.value.map(item => {
                        return {
                            geometry: {
                                type: "point",
                                longitude: item.longitude,
                                latitude: item.latitude,
                                z: item.height
                            },
                            attributes: {
                                id: item.id,
                                type: 'monitor',
                                name_text: item.monitorName,
                                monitorSrc: item.monitorSrc
                            }
                        }
                    }),
                    fields: [ //这里是attributes中所有的属性配置，就是定义什么类型、别名
                        {
                            name: "id",
                            alias: "id",
                            type: "oid"
                        },
                        {
                            name: "type",
                            alias: "type",
                            type: "string"
                        },
                        {
                            name: "name_text",
                            alias: "name_text",
                            type: "string"
                        },
                        {
                            name: "monitorSrc",
                            alias: "monitorSrc",
                            type: "string"
                        },

                    ],
                    objectIdField: "id",
                    renderer: iconSymbolRenderer,
                    outFields: ["*"], //将attributes中的属性全部抛出，或者你抛出你想要的
                    labelingInfo: [labelClass]
                })
                window.map.add(graphicsLayerArr);
                setTimeout(() => {
                    monitorCom.value.loading = false
                }, 1000)
            }

            //更更换视角
            let mapGoTo = (longitude, latitude) => {
                window.viewer.goTo({
                    center: [Number(longitude), Number(latitude)],
                    duration: 3000,
                    zoom: 21
                })
            }

            let getMonitor = () => {
                // let baseId = window.GetQueryString('baseId')
                queryMonitor({ baseId:baseId}).then(res => {
                    monitorDatas.value = res.result.records
                })
            }

            //添加楼房icon
            let addBuildings = (arr) => {
                let sxtImg = new URL("@assets/building.png", import.meta.url).href;

                const iconSymbol = {
                    type: "point-3d",
                    symbolLayers: [
                        {
                            type: "icon",
                            resource: { href: sxtImg }, //https://www.jxdkchy.com:30340/src/sxt.png
                            size: 40
                        }
                    ],
                    verticalOffset: {
                        screenLength: 20, // 调整垂直偏移量
                    },
                };
                const iconSymbolRenderer = {
                    type: "simple",
                    symbol: iconSymbol
                };
                const labelClass = {
                    symbol: {
                        type: "text",
                        color: "#fff",
                        backgroundColor: [0, 0, 0, 0.5],
                        font: {
                            family: "Playfair Display",
                            size: 14,
                            weight: "bold"
                        }
                    },
                    labelPlacement: "above-center",
                    labelExpressionInfo: {
                        expression: "$feature.name_text"
                    }
                };

                if(!arr.length) return

                let sources = arr.map(item => {
                    if(!item) return
                    return {
                        geometry: {
                            type: "point",
                            longitude: item.longitude,
                            latitude: item.latitude,
                            z: item.z
                        },
                        attributes: {
                            id: item.id,
                            type: 'building',
                            name_text: item.name,
                        }
                    }
                })
                let graphicsLayerArr = new FeatureLayer({
                    id: "building",
                    source: sources.filter(i => i != undefined),
                    fields: [ //这里是attributes中所有的属性配置，就是定义什么类型、别名
                        {
                            name: "id",
                            alias: "id",
                            type: "oid"
                        },
                        {
                            name: "type",
                            alias: "type",
                            type: "string"
                        },
                        {
                            name: "name_text",
                            alias: "name_text",
                            type: "string"
                        }
                    ],
                    objectIdField: "id",
                    renderer: iconSymbolRenderer,
                    outFields: ["*"], //将attributes中的属性全部抛出，或者你抛出你想要的
                    labelingInfo: [labelClass]
                })
                window.map.add(graphicsLayerArr);

                //添加白膜
                // let boundaryArr = arr.filter(item => item && item.boundary)
                // window.featureLayer = new GraphicsLayer();
                //
                // let bmArr = []
                //
                // boundaryArr.forEach(item => {
                //     let boudary_array = item.boundary.split(";").map(row => row.split(',').map(Number))
                //     const polygonGeometry = createExtrudedPolygon(...boudary_array);
                //     bmArr.push(
                //         new Graphic({
                //             geometry: polygonGeometry,
                //             symbol: {
                //                 type: 'polygon-3d',
                //                 symbolLayers: [{
                //                     type: 'extrude',
                //                     size: 15, // 白膜的高度，可以根据需要调整
                //                     material: {
                //                         color: [0, 0, 0, 0] // 白膜的颜色，可以根据需要调整
                //                     }
                //                 }]
                //             },
                //             attributes:Object.assign(item, { type: 'baimo' })
                //         })
                //     )
                // })
                // window.featureLayer.addMany(bmArr)
                // window.map.add(window.featureLayer);
                // function createExtrudedPolygon(topLeft, topRight, bottomRight, bottomLeft) {
                //     // 创建一个二维多边形
                //     const polygon = {
                //         type: 'polygon',
                //         rings: [[
                //             topLeft,
                //             topRight,
                //             bottomRight,
                //             bottomLeft,
                //             topLeft // 闭合多边形
                //         ]]
                //     };
                //
                //     // 将二维多边形转换为三维白膜
                //     const extrudedPolygon = new Polygon({
                //         rings: polygon.rings,
                //         hasZ: true,
                //         spatialReference: { wkid: 4490 }
                //     });
                //
                //     return extrudedPolygon;
                // }


                //方法2：
                // let boundaryArr = arr.filter(item => item && item.boundary)
                // let bmArr = []
                //
                // boundaryArr.forEach(item => {
                //     let boudary_array = item.boundary.split(";").map(row => row.split(',').map(Number))
                //     const polygonGeometry = createExtrudedPolygon(...boudary_array);
                //     bmArr.push(
                //         new Graphic({
                //             geometry: polygonGeometry,
                //             symbol: {
                //                 type: 'polygon-3d',
                //                 symbolLayers: [{
                //                     type: 'extrude',
                //                     size: 20, // 白膜的高度，可以根据需要调整
                //                     material: {
                //                         color: [255, 0, 0, 0.1] // 白膜的颜色，可以根据需要调整
                //                     }
                //                 }]
                //             },
                //             attributes:Object.assign(item, { type: 'baimo' }),
                //         })
                //     )
                // })
                // console.log("倒是现在看下是不是有id", bmArr)
                // window.featureLayer = new FeatureLayer({
                //     id: "baimo",
                //     source: bmArr,
                //     fields: [ //这里是attributes中所有的属性配置，就是定义什么类型、别名
                //         {
                //             name: "id",
                //             alias: "id",
                //             type: "oid"
                //         },
                //         {
                //             name: "type",
                //             alias: "type",
                //             type: "string"
                //         },
                //         {
                //             name: 'name',
                //             alias: 'name',
                //             type: "string"
                //         },
                //         {
                //             name: 'longitudeLatitude',
                //             alias: 'longitudeLatitude',
                //             type: 'string'
                //         }
                //     ],
                //     objectIdField: "id",
                //     renderer: {
                //         type: "simple",
                //         symbol: {
                //             type: 'polygon-3d',
                //             symbolLayers: [{
                //                 type: 'extrude',
                //                 size: 15, // 白膜的高度，可以根据需要调整
                //                 material: {
                //                     color: [0, 0, 0, 0.00001] // 白膜的颜色，可以根据需要调整
                //                 }
                //             }]
                //         }
                //     },
                //     outFields: ["*"], //将attributes中的属性全部抛出，或者你抛出你想要的
                // });
                //
                //
                // // window.featureLayer.addMany(bmArr)
                // window.map.add(window.featureLayer);
                //
                //
                // function createExtrudedPolygon(topLeft, topRight, bottomRight, bottomLeft) {
                //     // 创建一个二维多边形
                //     const polygon = {
                //         type: 'polygon',
                //         rings: [[
                //             topLeft,
                //             topRight,
                //             bottomRight,
                //             bottomLeft,
                //             topLeft // 闭合多边形
                //         ]]
                //     };
                //
                //     // 将二维多边形转换为三维白膜
                //     const extrudedPolygon = new Polygon({
                //         rings: polygon.rings,
                //         hasZ: true,
                //         hasM: true,
                //         spatialReference: { wkid: 4490 }
                //     });
                //
                //     return extrudedPolygon;
                // }


            }

            //重构各组件数据
            let init = data => {
                if(typeStr == 0) {
                    let {
                        area,
                        population,
                        buildingsTotal,
                        households,
                        structurePublicPf,
                        structurePublicLf,
                        structurePrivatePf,
                        structurePrivateLf,
                        landEvaluate,
                        landCost
                    } = data
                    maintenanceCountData.value = {
                        landEvaluate,
                        landCost
                    }

                }else{

                }
            }

            //土地价值
            let landValueFn = (data) => {
                if(data){
                    let {
                        landEvaluate,
                        landCost
                    } = data
                    maintenanceCountData.value = {
                        landEvaluate,
                        landCost
                    }
                }
            }

            watch(() => props.data, (newVal, oldVal) => {
                init(newVal)
            })

            onMounted(() => {
                if(typeStr == '0'){
                    getMonitor()
                    landValueFn(props.data)
                }else{
                    let sysOrgCode = window.sysOrgCode
                    queryBaeDetailsPlus({ superQueryParams: JSON.stringify([{ field:"sysOrgCode", rule:"right_like", val: sysOrgCode}]) }).then(res => {
                        let { dpBaseAreaInfo, dpBaseDistribution, dpBaseInfo, dpIndependentHouseDistribution } = res.result
                        baseMsgData.value = dpBaseInfo
                        baseCount.value = dpBaseDistribution
                        IndependentProperty.value = dpIndependentHouseDistribution

                    })
                }

            })

            return {
                grade: window.typeStr,
                monitorDatas,
                addMonitor,
                monitorCom,
                mapGoTo,
                baseMsgData,
                addBuildings,
                baseCount,
                maintenanceCountData,
                IndependentProperty
            }
        }
    }
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    .kptj{
        width: 100%;
        height: 30%;
        .main{
            width: 100%;
            height: 100%;
        }
    }
    .jdsl{
        width: 100%;
        height: 35%;
        .chat{
            width: 100%;
            height: 100%;
        }
    }
    .whtj{
        width: 100%;
        height: 35%;
        .chat{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
